<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  01: 引入vue.js -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <!--02: 创建一个根标签节点 id=app 标签 -->
    <div id="app">
        {{ message }}
    </div>

    <p>{{message}}</p>

    <div id="app1">
        {{ message1 }}
    </div>

</body>

</html>
<script>
    // 03:  由于引入了vue.js 文件, 所以就会存在一个 Vue的一个大对象
    console.log('Vue', Vue);
    // 解构出一个 createApp方法, 该方法可以用来创建一个vue 的应用,也可以称之为vue实例对象
    const { createApp } = Vue;

    const vm = createApp({
        data() { // 该data 属性用来声明vue 实例中需要的数据
            return {
                message: 'Hello Vue!'  //就是一个数据

            }
        }
    }).mount('#app') // 将整个创建完vm 实例挂载到 id="app"这个根节点上
    // 注意: 必须挂载根节点, 应为挂载的意思其实就是声明了vue 语法的作用域
    console.log('vm', vm);
    // vm 为项目的实例对象, vue 将所有的属性和方法都挂载到该实例上,
    // 可以通过该实例访问该实例上的所有的属性和方法

    // 问题?  可以创建多个实例吗?

    const vm1 = createApp({
        data() { // 该data 属性用来声明vue 实例中需要的数据
            return {
                message1: 'Hello'  //就是一个数据

            }
        }
    }).mount('#app1') 
</script>